<template>
	<div class="orderListPage">
		<div class="orderListAllPage">
			<div class="top_fixed">
				<div class="to_top">
					<!-- app点餐的title和图标 -->
						<van-row type="flex" >
							  <van-row type="flex" class="titleName">
							    <van-col span="24">
								  
							  	  <h4>我的订单</h4>
							    </van-col>
							  </van-row>
						</van-row>
				</div>
			</div>
			<div class="list_top_tab">
				<van-row>
					<van-col span="24" class="tab_select">
						<van-tabs v-model="activeName">
						  <van-tab title="当前订单"  name="a">
							
							<div class="tab_content" v-if="this.checklists">
												
												<div class="content_title">
													<van-row type="flex">
														<van-col span="20">
															<p class="head">棉花餐厅</p>
															<div class="head_down">
																<p class="style_one">POS点餐</p>
																<p class="style_two">堂食</p>
															</div>
															
														</van-col>
														<van-col class="finish" span="4">配送中..</van-col>
													</van-row>
												</div>
												<div class="content_dish" v-for="list,index in checklists" :key="index">
													<van-row type="flex">
														<van-col span="20">
															<div class="dishinfo_left">
																<img :src="list.path" >
																<p class="dish_name">{{list.name}}</p>
															</div>
														
														</van-col>
														<van-col span="4">
															<p class="dish_price">{{list.price | price}}</p>
															<p class="dish_num">共{{list.num}}件</p>
														</van-col>
													</van-row>
													
												</div>
												
												
												<div class="list_number">
													<p>取单号</p>
													<img src="../assets/loading.gif" >
												</div>
												<div class="comment">
													<p>立即取餐</p>
												</div>
									</div>
								<div class="list_none"  v-else="this.checklists=undefined">
									<p>当前还没有订单，快去下单！</p>
								</div>
							  
						  </van-tab>
						
							
						  <van-tab title="历史订单"  name="b">
							  <div class="tab_content">
									
									<div class="content_title">
										<van-row type="flex">
											<van-col span="20">
												<p class="head">棉花餐厅</p>
												<div class="head_down">
													<p class="style_one">POS点餐</p>
													<p class="style_two">堂食</p>
												</div>
												
											</van-col>
											<van-col class="finish" span="4">已完成</van-col>
										</van-row>
									</div>
									<div class="content_dish">
										<van-row type="flex">
											<van-col span="20">
												<div class="dishinfo_left">
													<img src="../assets/order/gaifan/1.jpg" >
													<p class="dish_name">川式小煎鸡</p>
												</div>
											
											</van-col>
											<van-col span="4">
												<p class="dish_price">￥16</p>
												<p class="dish_num">共1件</p>
											</van-col>
										</van-row>
										
									</div>
									<div class="list_number">
										<p>取单号</p>
										<p class="num">333</p>
										
									</div>
									<div class="comment">
										<p>立即评价</p>
									</div>
							  </div>
						  </van-tab>
					  <van-tab  disabled name="c"></van-tab>
					   <van-tab  disabled name="d"></van-tab>
						</van-tabs>
						
					</van-col>
					<van-col class="other_list_out" span="8">
						<p class="other_list" @click="showlistview" > 其他订单&nbsp;﹀</p>
					</van-col>
					
				</van-row>
				<div class="other_list_content" v-show="showlist">
					<router-link :to="{name:'orderPage'}">
						<p>买单订单</p>
					</router-link>
					<router-link :to="{name:'accountPage'}">
						<p>会员储值订单</p>
					</router-link>
					<router-link :to="{name:'creditPage'}">
						<p>券包订单</p>
					</router-link>
					<router-link :to="{name:'discountPage'}">
						<p>礼品卡订单</p>
					</router-link>
					
				</div>
			</div>
			
				
			
			
			
		</div>
		
	</div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs,DropdownMenu, DropdownItem} from 'vant';
	
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default{
	name:'orderListPage',
	data(){
		return{
		activeName: 'a',
		
		showlist:false,
		checklists:this.$route.query.checklist,
		}
	},
	methods:{
		showlistview(){
			this.showlist=!this.showlist;
		}	
	},
	created() {
		console.log(this.checklists)
	},
	// 过滤价格
	filters:{
		price(val){
			return '￥'+val.toFixed(2);
		}
	}
	
}
</script>

<style scoped>
	
a p{
	color: black;
}
.orderListAllPage{
	position: relative;
	background-color: #f7f7f7;
	height: 1000px;
	
}
.to_top{
	width:375px;
	height:50px;
	background:#E91F3C;
	color:#fff;
	text-align:center;
	position:fixed;
	margin:0 auto;
	z-index: 10;
	top: 0;
	left: 0;
}
.to_top .titleName{
	width:375px;
	height:40px;
	font-size: 16px;
	position:absolute;
	bottom:0px;
	line-height:0px;
}



.list_top_tab{
	position: relative;	
	width: 375px;
	padding-top: 50px;

}


.other_list{
	margin-top: 10px;
}
.select_active{
	font-weight: 700;
	color: #e60012;
	padding-bottom:10px;
	border-bottom: 2px solid #e60012 ;
}
.van-tabs{

	width: 375px;
	
}

.other_list_out{
		position: absolute;
		right: 0;
		top: 0;
		font-size: 14px;
		height: 45px;	
		padding-top: 50px;
}
.tab_content{
	position: relative;
	margin: 10px;
	width: 350px;
	height: auto;
	padding: 3px;
	border-radius: 15px;
	background-color: white;
}
.content_title{

}
.content_title .head{
	font-weight: 600;
	font-size: 16px;
	text-align: left;
	margin-left: 10px;
	margin-top: 10px;
}
.head_down{
	display: flex;
	font-size: 5px;
	margin-left: 10px;
	margin-top: -15px;
}
.style_one{
	background-color: #e70012;
	color: white;
	padding: 1px;
	font-size: 2px;
}
.style_two{
	
	color: #e70012;
	margin-left: 5px;
	border: 1px solid #e70012;
	padding: 1px;
	font-size: 2px;
}
.finish{
	color: #e70012;
	font-size: 14px;
	margin-top: 10px;
}

.content_dish img{
	width: 50px;
	height: 50px;
}
.dishinfo_left{
	display: flex;
	margin-left: 10px;
}
.content_dish .dish_name{
	font-size: 13px;
	margin-left: 5px;
	margin-top: 5px;
}
.dish_price{
	font-size: 16px;
	font-weight: 700;
	margin-top: 5px;
}
.dish_num{
	font-size: 11px;
	color: #cacaca;
	margin-top: -10px;
	margin-right: -10px;
}
.list_number{
	width: 340px;
	background-color: #f5f5f5;
	height: 50px;
	margin: 10px;
    border-radius: 15px;
	display: flex;
}
.list_number p{
	font-size: 13px;
	margin-left: 10px;
	color: #969696;
}
.list_number img{
	width: 30px;
	height: 30px;
	margin-left: 30px;
	margin-top: 10px;
}
.list_number .num{
	font-weight: 700;
	font-size: 19px;
	margin-left: 20px;
	margin-top: 12px;
}
.comment{
	margin-left: 250px;
	margin-top: 10px;	
}
.comment p{
	width: 70px;
	font-size: 16px;
	margin-right: 10px;
	border: 1px solid #b6b6b6;
	border-radius: 10px;
	padding: 5px 10px 5px 10px;
}
.other_list_content{
	position: absolute;
	right: 10px;
	top: 90px;
	border: 1px solid #d0d0d0;
	background-color: #ffffff;
	width: 100px;
	border-radius: 5px;
	
	 box-shadow: 0px 2px  3px;
}
.other_list_content p{
	width: 80px;
	font-size: 13px;
	text-align: left;
	margin-left: 10px;
	padding-bottom: 5px;
	border-bottom: 0.5px solid #afafaf;
	}
.other_list_content div{
	font-size: 13px;
	text-align: left;
	margin-left: 10px;
	padding-bottom: 5px;
}
.list_none p{
	font-size: 20px;
}
</style>
